<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>组件嵌套组件（单向）</title>
  </head>
  <body>
    <!--form 模板-->
    <template id="form">
      <div>
        <label for="name">What's your name?</label>
        <input v-model="user" type="text" id="name">
      </div>
    </template>

    <!-- saying hello 模板 -->
    <template id="hello">
      <h1>{{msg}} {{user}}</h1>
    </template>

    <!-- greetings 模板 -->
    <template id="greetings">
      <div>
        <form-component :user="user"></form-component>
        <hello-component :user="user"></hello-component>
      </div>
    </template>

    <div id="app">
      <greetings-component></greetings-component>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
    <script>
      //注册 form 组件
      Vue.component('form-component', {
        template: '#form',
        props: ['user']
      });

      //注册 hello 组件
      Vue.component('hello-component', {
        template: '#hello',
        data: function () {
          return {
            msg: 'Hello'
          }
        },
        props: ['user']
      });

      //基于 greetings 模板创建 greetings 组件
      Vue.component('greetings-component', {
        template: '#greetings',
        data: function () {
          return {
            user: 'hero'
          }
        }
      });

      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>
